<template>
  <div class="section has-bg-dots">
    <div class="container">
      <!--Title-->
      <div class="section-title has-text-centered py-6">
        <h2 class="title is-2">Awesome Features</h2>
        <h4>Vuero has been carefully handcrafted.</h4>
      </div>

      <!--Content-->
      <div class="py-12">
        <div class="columns is-vcentered is-multiline card-icon-boxes">
          <!--Box-->
          <div class="column is-3">
            <div class="card card-icon-box">
              <div class="card-content">
                <VIconBox size="medium" color="blue">
                  <i aria-hidden="true" class="lnil lnil-layout-alt-2"></i>
                </VIconBox>

                <h4 class="title is-5">Nice Vectors</h4>
                <p class="subtitle is-6 light-text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </p>
              </div>
            </div>
          </div>
          <!--Box-->
          <div class="column is-3">
            <div class="card card-icon-box">
              <div class="card-content">
                <VIconBox size="medium" color="warning">
                  <i aria-hidden="true" class="lnil lnil-layers"></i>
                </VIconBox>

                <h4 class="title is-5">Icon title</h4>
                <p class="subtitle is-6 light-text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </p>
              </div>
            </div>
          </div>
          <!--Box-->
          <div class="column is-3">
            <div class="card card-icon-box">
              <div class="card-content">
                <VIconBox size="medium" color="success">
                  <i aria-hidden="true" class="lnil lnil-grid-alt"></i>
                </VIconBox>

                <h4 class="title is-5">Icon title</h4>
                <p class="subtitle is-6 light-text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </p>
              </div>
            </div>
          </div>
          <!--Box-->
          <div class="column is-3">
            <div class="card card-icon-box">
              <div class="card-content">
                <VIconBox size="medium" color="purple">
                  <i aria-hidden="true" class="lnil lnil-bulb"></i>
                </VIconBox>

                <h4 class="title is-5">Icon title</h4>
                <p class="subtitle is-6 light-text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </p>
              </div>
            </div>
          </div>
          <!--Box-->
          <div class="column is-3">
            <div class="card card-icon-box">
              <div class="card-content">
                <VIconBox size="medium" color="green">
                  <i aria-hidden="true" class="lnil lnil-cog"></i>
                </VIconBox>

                <h4 class="title is-5">Icon title</h4>
                <p class="subtitle is-6 light-text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </p>
              </div>
            </div>
          </div>
          <!--Box-->
          <div class="column is-3">
            <div class="card card-icon-box">
              <div class="card-content">
                <VIconBox size="medium" color="yellow">
                  <i aria-hidden="true" class="lnil lnil-plug"></i>
                </VIconBox>

                <h4 class="title is-5">Icon title</h4>
                <p class="subtitle is-6 light-text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </p>
              </div>
            </div>
          </div>
          <!--Box-->
          <div class="column is-3">
            <div class="card card-icon-box">
              <div class="card-content">
                <VIconBox size="medium" color="orange">
                  <i aria-hidden="true" class="lnil lnil-folder-alt"></i>
                </VIconBox>

                <h4 class="title is-5">Icon title</h4>
                <p class="subtitle is-6 light-text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </p>
              </div>
            </div>
          </div>
          <!--Box-->
          <div class="column is-3">
            <div class="card card-icon-box">
              <div class="card-content">
                <VIconBox size="medium" color="info">
                  <i aria-hidden="true" class="lnil lnil-timer"></i>
                </VIconBox>

                <h4 class="title is-5">Icon title</h4>
                <p class="subtitle is-6 light-text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </p>
              </div>
            </div>
          </div>
          <!--Box-->
          <div class="column is-3">
            <div class="card card-icon-box">
              <div class="card-content">
                <VIconBox size="medium" color="blue">
                  <i aria-hidden="true" class="lnil lnil-pie-chart-alt"></i>
                </VIconBox>

                <h4 class="title is-5">Icon title</h4>
                <p class="subtitle is-6 light-text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </p>
              </div>
            </div>
          </div>
          <!--Box-->
          <div class="column is-3">
            <div class="card card-icon-box">
              <div class="card-content">
                <VIconBox size="medium" color="purple">
                  <i aria-hidden="true" class="lnil lnil-licencse"></i>
                </VIconBox>

                <h4 class="title is-5">Icon title</h4>
                <p class="subtitle is-6 light-text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </p>
              </div>
            </div>
          </div>
          <!--Box-->
          <div class="column is-3">
            <div class="card card-icon-box">
              <div class="card-content">
                <VIconBox size="medium" color="green">
                  <i aria-hidden="true" class="lnil lnil-grow"></i>
                </VIconBox>

                <h4 class="title is-5">Icon title</h4>
                <p class="subtitle is-6 light-text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </p>
              </div>
            </div>
          </div>
          <!--Box-->
          <div class="column is-3">
            <div class="card card-icon-box">
              <div class="card-content">
                <VIconBox size="medium" color="yellow">
                  <i aria-hidden="true" class="lnil lnil-bank"></i>
                </VIconBox>

                <h4 class="title is-5">Icon title</h4>
                <p class="subtitle is-6 light-text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </p>
              </div>
            </div>
          </div>
        </div>

        <!--CTA-->
        <div class="cta-block no-border">
          <div class="head-text">
            <h3>Want to learn more?</h3>
            <p>Check out the Vuero documentation</p>
          </div>
          <div class="head-action">
            <div class="buttons">
              <VButton
                class="action-button"
                color="primary"
                rounded
                elevated
                href="https://docs.cssninja.io/vuero"
              >
                Read the Docs
              </VButton>
              <a
                href="https://cssninja.io"
                target="_blank"
                rel="noopener"
                class="button chat-button is-secondary"
              >
                Chat with us
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
